<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>个人门户</title>
    <link rel="stylesheet" type="text/css" href="../../easyui/themes/default/easyui.css" />
    <link rel="stylesheet" type="text/css" href="../../easyui/themes/icon.css" />
    
    <script type="text/javascript" src="../../js/jquery-latest.min.js"></script>
    <script type="text/javascript" src="../../easyui/jquery.easyui.min.js"></script>
    <script type="text/javascript" src="../../easyui/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript" src="../../easyui/plugins/jquery.portal.js"></script>
    <link rel="stylesheet" type="text/css" href="../../easyui/themes/portal.css" />
    
    <style type="text/css">
		.title{
			font-size:16px;
			font-weight:bold;
			padding:20px 10px;
			background:#eee;
			overflow:hidden;
			border-bottom:1px solid #ccc;
		}
		.t-list{
			padding:5px;
		}
	</style>
	<script>
		$(function(){
			$('#pp').portal({
				border:false,
				fit:true
			});

			$('#mainMap').panel();
			//add();
			
			$('#p').panel({
			    href:'drplanMap.html',
			    onLoad:function(){
			        alert('loaded successfully');
			    }
			});
			
		});
		function add(){
			for(var i=0; i<2; i++){
				var p = $('<div/>').appendTo('body');
				p.panel({
					title:'Title'+i,
					content:'<div style="padding:5px;">Content'+(i+1)+'</div>',
					height:100,
					closable:true,
					collapsible:true
				});
				$('#pp').portal('add', {
					panel:p,
					columnIndex:i
				});
			}
			$('#pp').portal('resize');
		}
		
		function remove(){
			$('#pp').portal('remove',$('#pgrid'));
			$('#pp').portal('resize');
		}
	</script>
</head>
<body class="easyui-layout">
	<div region="center" border="false">
		<div id="pp" style="position:relative">
			<div style="width:20%;">
				<div title="开发井完成率" iconCls="icon-search" closable="true" style="height:200px;padding:5px;">
					<img src="../../images/portal/dr/portal_left_1.jpg" width="96%" height="96%"/>
				</div>
				<div title="探井完成率" style="text-align:center;height:200px;padding:5px;">
					<img src="../../images/portal/dr/portal_left_2.jpg" width="96%" height="96%"/>
			    </div>
			    <div title="完钻、正钻数统计" collapsible="true" closable="true" style="height:200px;padding:5px;">
			    	<img src="../../images/portal/dr/portal_left_3.jpg" width="96%" height="100%"/>
			    </div>
			</div>
			<div style="width:50%;">
				<!-- overflow: scroll; -->
				<div id="tabsdiv" class="easyui-tabs" style="height:320px;">
					<div title="钻井运行图" style="padding:10px">
						<!-- <h1>嵌入钻井运行图</h1> -->
						<img src="../../images/portal/dr/portal_center_1.jpg" width="96%" height="100%"/>
					</div>
					<div title="GIS导航" style="padding:10px">
						<!-- <h1>嵌入GIS导航</h1> -->
						<a href="drplanMap.html" target="_blank">全屏查看</a>
						<iframe src="drplanMap.html" width="98%" height="300px;"></iframe>
					</div>
				</div>
			
				<div id="pgrid" title="计划与完成动态表" closable="true" style="height:290px;">
					<table class="easyui-datagrid" style="width:650px;height:auto;"
							fit="true" border="false"
							singleSelect="true"
							id="datagrid1"
							idField="itemid">
						<thead>
							<tr>
								<th data-options="field:'jsontext0',width:70" rowspan="2">项目</th>
								<th colspan="3">探井</th>
								<th colspan="3">开发井</th>
								<th colspan="4">探井+开发井</th>
							</tr>
							<tr>	
								<th field="jsontext1" width="50">计划</th>
								<th field="jsontext3" width="50">完成</th>
								<th field="jsontext4" width="50">完成率</th>
								
								<th field="jsontext2" width="50">计划</th>
								<th field="jsontext3" width="50">完成</th>
								<th field="jsontext4" width="50">完成率</th>
								
								<th field="jsontext2" width="50">计划</th>
								<th field="jsontext3" width="50">完成</th>
								<th field="jsontext4" width="50">完成率</th>
								<th field="jsontext4" width="50">在钻井</th>
							</tr>
						</thead>
						<tbody>
					        <tr>
					            <td>大庆</td>
					            <td>58</td>
					            <td>0</td>
					            <td>0%</td>
					            <td>32</td>
					            <td>0</td>
					            <td>0%</td>
					            <td>90</td>
					            <td>0</td>
					            <td>0%</td>
					            <td>5</td>
					        </tr>
					        <tr>
					            <td>辽河</td>
					            <td>58</td>
					            <td>0</td>
					            <td>0%</td>
					            <td>32</td>
					            <td>0</td>
					            <td>0%</td>
					            <td>90</td>
					            <td>0</td>
					            <td>0%</td>
					            <td>5</td>
					        </tr>
					    </tbody>
					</table>
				</div>
			</div>
			<div style="width:30%;">
				<div title="完井井深、平均完钻井深" collapsible="true" closable="true" style="height:200px;padding:5px;">
					<img src="../../images/portal/dr/portal_right_1.jpg" width="96%" height="96%"/>
			    </div>
			    <div title="钻井天数、平均钻井周期统计" collapsible="true" closable="true" style="height:200px;padding:5px;">
			    	<img src="../../images/portal/dr/portal_right_2.jpg" width="96%" height="96%"/>
			    </div>
			    <div title="钻井动用钻机统计" collapsible="true" closable="true" style="height:200px;padding:5px;">
			    	<img src="../../images/portal/dr/portal_right_3.jpg" width="96%" height="96%"/>
			    </div>
			</div>
		</div>
	</div>
	<!-- <script src="http://echarts.baidu.com/build/echarts-plain-map.js"></script> -->
	<script type="text/javascript">
    // --- 地图 ---
    </script>
</body>
</html>